import BaseChart from "@/components/Chart/BaseChart.vue";
import { randomVal } from "@/utils/util";
import * as echarts from "echarts";
import { dayjs } from "element-plus";
export default defineComponent({
	props: {
		dashboardData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup() {
		return () => {
			return (
				<div class="w-full left-analysis item-container">
					<div class="title">能耗分析</div>
					<div class="body chart-container">
						<div class="chart-top" style="height:40%">
							<PieChart />
						</div>
						<div style="height:60%">
							<TrendChart />
						</div>
					</div>
				</div>
			);
		};
	}
});

const PieChart = defineComponent({
	setup() {
		const trendChartOpts = reactive({
			color: ["#10CCCF", "#A3CF10", "#10CF76", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#0C9EFF"],
			tooltip: {
				trigger: "item"
			},
			legend: { show: false },
			series: [
				{
					name: "Access From",
					type: "pie",
					radius: ["60%", "100%"],
					avoidLabelOverlap: false,
					itemStyle: {
						borderColor: "transparent",
						borderWidth: 5
					},
					label: {
						show: false,
						position: "center"
					},
					labelLine: {
						show: false
					},
					data: [
						{ value: 1048, name: "底下停车库" },
						{ value: 735, name: "生产车间" },
						{ value: 484, name: "仓库" },
						{ value: 284, name: "机房中心" },
						{ value: 300, name: "东南角配电房" }
					] as any[]
				}
			]
		});
		const trendChart = ref();
		onMounted(() => {
			// trendChartOpts.yAxis.data = ["1", "1", "1", "1", "1", "1", "1"];
			// trendChartOpts.series[0].data = ["1", "10", "51", "71", "21", "41", "81"];
			trendChart.value.setChart(trendChartOpts);
		});
		return () => {
			return (
				<>
					<div class="chart-left flex-1">
						<div class="chart-bg">
							<div class="pie-ext-text">
								<div class="text-center">
									<div class="">
										<span class="value">0</span>
										<span class="text-xs">kh</span>
									</div>
									<div>月能耗</div>
								</div>
							</div>
						</div>
						<div class="chart-p">
							<BaseChart ref={trendChart} width="100%" />
						</div>
					</div>
					<div class="w-1/2 chart-right">
						<div class="item">
							<div class="item-label flex">
								<div class="legend" style={{ background: "#10CCCF" }}></div>
								<div>东南角配电房</div>
							</div>
							<div class="item-value">568kWh</div>
						</div>
						<div class="item">
							<div class="item-label flex">
								<div class="legend" style={{ background: "#A3CF10" }}></div>
								<div>停车场</div>
							</div>
							<div class="item-value">120kWh</div>
						</div>
						<div class="item">
							<div class="item-label flex">
								<div class="legend" style={{ background: "#10CF76" }}></div>
								<div>仓库</div>
							</div>
							<div class="item-value">80kWh</div>
						</div>
						<div class="item">
							<div class="item-label flex">
								<div class="legend" style={{ background: "#ee6666" }}></div>
								<div>生产车间</div>
							</div>
							<div class="item-value">890kWh</div>
						</div>
					</div>
				</>
			);
		};
	}
});
const TrendChart = defineComponent({
	setup() {
		const state = reactive({
			active: ""
		});
		const trendChartOpts = reactive({
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} kWh",
				axisPointer: {
					type: "shadow"
				}
			} as any,
			toolbox: { show: false },
			legend: { show: false },
			xAxis: {
				splitLine: { show: false },
				axisLine: { lineStyle: { color: "#7ac0c6" } },
				axisLabel: { textStyle: { color: "#7ac0c6" } },
				data: [] as any[],
				type: "category",
				boundaryGap: false
			},
			yAxis: {
				type: "value",
				splitLine: { show: true, lineStyle: { color: "#083f3a" } },
				axisLabel: { show: false, formatter: `{value}` }
			},
			grid: {
				left: "20",
				right: "20",
				bottom: "5%",
				top: "20",
				containLabel: true
			},
			series: [
				{
					type: "line",
					smooth: true,
					showSymbol: false,
					name: "用电",
					lineStyle: {
						color: "#14dcd7",
						width: 4
					},
					//区域图-背景
					areaStyle: {
						opacity: 1,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0, //底部
								color: "#0b4d44"
							},
							{
								offset: 0.3, //50%位置
								color: "#0b4d44"
							},
							{
								offset: 1, //顶部
								color: "#0b4d4400"
							}
						])
					},
					markPoint: null,
					emphasis: {
						focus: "series",
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)"
						}
					},
					data: [] as any[]
				}
			]
		});
		const trendChart = ref();
		onMounted(() => {
			state.active = "item1";
			// 	trendChartOpts.xAxis.data = ["1", "1", "1", "1", "1", "1", "1"];
			// 	trendChartOpts.series[0].data = ["1", "10", "51", "71", "21", "41", "81"];
			// 	trendChart.value.setChart(trendChartOpts);
			if (state.active) {
				trendChartOpts.xAxis.data = [];
				trendChartOpts.series[0].data = [];
				let maxDay = dayjs().daysInMonth();
				let end = dayjs().get("date");
				let startDts = dayjs(dayjs().format("YYYY-MM-01 00:00:00"));
				for (let i = 1; i <= maxDay; i++) {
					trendChartOpts.xAxis.data.push(startDts.format("MM-DD"));
					startDts = startDts.add(1, "d");
					if (i <= end) {
						trendChartOpts.series[0].data.push(randomVal(300, 400, 1)[0]);
					}
				}
				trendChart.value?.setChart(trendChartOpts);
			}
		});
		return () => {
			return (
				<>
					<div class="time-type flex justify-center pl-4">
						<div class={["item", state.active == "item1" ? "active" : ""]} onClick={() => (state.active = "item1")}>
							东南角配电房
						</div>
						<div class={["item", state.active == "item2" ? "active" : ""]} onClick={() => (state.active = "item2")}>
							停车场
						</div>
						<div class={["item", state.active == "item3" ? "active" : ""]} onClick={() => (state.active = "item3")}>
							机房中心
						</div>
						<div class={["item", state.active == "item4" ? "active" : ""]} onClick={() => (state.active = "item4")}>
							智能展厅
						</div>
					</div>
					<div style="height:calc(100% - 30px)">
						<BaseChart ref={trendChart} example class="w-full" />
					</div>
				</>
			);
		};
	}
});
